相關文章

• Day09 : 切版(一) _ 基礎架構2 ＆ 圖片的顯示方法
• Day10 : 切版(一) _ 基礎架構3 : 區塊分割
• Day11 : 切版(二) ： 基礎樣式 1 : 內距與外距

大概就是命中註定我一定得今天寫切版所以才會手誤按下發送（擦淚

好我們大概在第4天的時候有簡單提過切版這件事，那今天我們就要來深入了解他
何謂切版？
我們將設計師已經設計好的Mockup(忘記的人可以點我查看昨天)製作成網頁
那怎麼切版？
我個人的話我會先把設計圖先區塊化分好，以期區塊內的元件標籤都分析好才會開始寫html的架構
我將昨天那張設計稿大致上切成這樣

黑色框框的部分主要為大框架的部分
粉紅色框框則是裡面的小區塊，綠色框框則是我分析出來要使用li去製作的區塊
所以大大小小區塊初步分析起來大概是8塊

那我們在這裡開始所有關於css的部分都是會以引入的方式做使用
附上語法 <link rel="stylesheet" href="css位置">
主要是為了可讀性，所以我喜歡把檔案都分清楚
css檔裡面的寫法跟你在style標籤裡的寫法一樣

開始

1.先建立專案資料夾、建立檔案

• 建立資料夾
  我自己的習慣，我會在主要目錄底下再分成四個資料夾
  css sass js images
  那因為我們目前大概只會使用css 以及 images 所以就只建這兩個資料夾
  那在之後所有的圖片都會整理到images這個資料夾，css也都是整理到css這個資料夾
• 建立index.html
  
• 在css資料夾內建立main.css
  這邊的css名稱並沒有限制說要取什麼
• 在css資料夾內建立reset.css
  因為每個瀏覽器所預設的的css預設值都不太一樣，所以我們常常會為了要讓每個平台一樣，要根據瀏覽器去做各種不同樣式的調整，也就是所謂的破版(在chrome看正常，去了ie就壞掉了)
  這一支css會將所有的預設值通通歸0;
  讓你在切版的時候可以省比較多的功夫，那我使用的reset是CSS大師Eric A. Meyer整理出的Reset CSS
  使用方法
  • 點我開啟下載頁面
  • 將裡面的內容通通複製到我們剛剛開的reset.css
    或是直接另存網頁到我們css資料夾
• 在main.css 將 reset.css 引進來 @import './reset.css';
  在 main.css 的最上頭將這一行加入就可以了

2.建立html架構

• 建立基本的html架構
  • 忘記的可以點我回顧第二天
• 建立框架
  • 我們使用div先建立兩個區塊並且給他class的名稱
    • 左側選單 class="menu";
    • 右側內容 class="content";

<div class="menu"></div>
<div class="content"></div>

這樣目前比較沒有感覺

• 在main.css新增樣式.menu 製作左側選單
  • 製作側邊選單的樣式，那在這裡先簡單分析他會需要有的屬性
    • 固定於左側浮動不變
    • 高度為整個畫面的高度

 .menu {
     height: 100vh;
     width: 300px;
     background-color: #7C7C7C;
     float: left;
 }

height : 使用算是比較新一點點的新屬性vh，讓我們的左側選單的高度可以跟著視窗高度做改變
width : 選單的寬度設定為300px
background-color : 設定背景顏色
float : 將視窗浮動於左側

結果

• 在main.css新增樣式.content 製作左側選單
  • 站滿右側區塊

.content {
     width: 100vw;
     height: 100vh;
     background-color: rgb(226, 129, 129);
 }

width:vh是跟著視窗高度，所以vw就是跟著視窗寬度，讓我們右側的內容區塊能視窗寬度做改變
height : 這邊為了配合之後的頁面所以也使用vh，那其實也可以不用設定這一個區域的高度
background-color : 為了讓大家看區塊所以加上背景色，我們版型設計是底色是白色，所以這個屬性會拿掉

結果

那我們主要的大框架就好了，明天我們就來把剩下的所有小區塊塞進去

想到就更新專業 樂樂
有任何問題都歡迎一起提出來討論>_O